<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
      canvas{
          border: 1px solid #000
      }
  </style>
</head>
<body>
   <canvas id="can" width="500" height="500" > </canvas>

<script>
     var can = document.getElementById("can");
     if(can.getContext("2d")){
         var ctx = can.getContext("2d");
         ctx.beginPath();
         ctx.arc(180,180,100,0,360*(Math.PI/180),false);
         ctx.moveTo(260,180)
         ctx.arc(180,180,80,0,180*(Math.PI/180),false);
         ctx.moveTo(155,150);
         ctx.arc(140,150,15,0,360*(Math.PI/180),false)
         ctx.moveTo(245,150);
         ctx.arc(230,150,15,0,360*(Math.PI/180),false)
         ctx.moveTo(180,180);
         ctx.lineTo(170,210);
         ctx.lineTo(190,210)
         ctx.stroke();
     }else{
         alert("不兼容")
     }



</script>
</body>
</html>